<template>
  <div>
    <div class="row" v-if="isShow">
      <csw-upload
        name="file"
        :url="uploadUrl"
        :headers="headers"
        :fileData="fileData"
        :fileList="fileList"
        :limit="limit"
        :multiple="true"
        :disabled="false"
        tips="推荐上传100px*100px的图片"
        :size="2"
        :autoUpload="false"
        :showFileList="true"
        :drag="false"
        dragIcon="el-icon-platform-eleme"
        dragText="<p>123456<em>点击</em></p>"
        @on-validateError="validateError"
        @on-success="uploadSuccess"
        @on-error="uploadError"
        @on-choice="choice"
        @on-exceed="uploadExceed"
      />
    </div>
    <div class="row" v-if="isShow">
      <csw-paging
        :total="100"
        :page="page"
        :pageSize="pageSize"
        :pageSizes="[15, 40, 50, 100]"
        :background="true"
        :disabled="false"
        :hideOnSinglePage="true"
        layout="total, sizes, prev, pager, next, jumper"
        @on-change="pagingChange"
      />
    </div>
    <div class="row" v-if="isShow">
      <el-button type="text" @click="open">点击打开 Message Box</el-button>
    </div>
    <div class="row" v-if="isShow">
      <el-button type="text" @click="openDialog">点击打开 Dialog</el-button>
      <csw-dialog
        title="天气预报"
        :visible.sync="showDialog"
        width="60%"
        :appendToBody="false"
        :showClose="true"
        :center="false"
        :btnCount="3"
        closeText="关闭弹框"
        confirmText="确定按钮"
        otherText="其他按钮"
        @cancel="dialogCloseUp"
        @confirm="dialogConfirm"
        @other="dialogOther"
      >
        <div class="add">
          我是 dialog-body 内的内容
          <p>气温下降</p>
        </div>
      </csw-dialog>
    </div>
    <div class="row" v-if="isShow">
      <csw-select :options="options" value="id" size="mini" @on-change="selectChange" />
    </div>
    <div class="row" v-if="isShow">
      <h3>指令：</h3>
      <el-button v-debounce:500="debounceClick" size="small">防抖</el-button>
      <el-button v-throole:1000="throoleClick" size="small">节流</el-button>
      <el-input type="text" v-focus size="small" />
      浮点数：<el-input type="text" v-float:3 size="small" v-model="inputval" />
    </div>
    <div class="row" v-if="isShow">
      <el-button @click="clear">清空编辑器</el-button>
      <csw-tinymce
        ref="editor"
        v-model="tinymceValue"
        @on-change="editText"
        :value="tinymceValue"
        :menubar="true"
        :statusbar="true"
        plugins="lists link image fullscreen media code"
        toolbar="bold italic underline strikethrough link"
      ></csw-tinymce>
    </div>
    <div class="row">
      <csw-sort ref="mysort" :sortList="sortList" @on-change="sortChange" />
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isShow: false,
        // 上传图片
        uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
        headers: { Authorization: 'Bearer token222' },
        fileData: {
          id: 2,
          type: 'add'
        },
        limit: 5,
        fileList: [
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        ],
        // 分页
        page: 1,
        pageSize: 15,
        showDialog: false,
        options: [
          { id: 1, label: '黄金糕' },
          { id: 2, label: '双皮奶' },
          { id: '选项3', label: '蚵仔煎' },
          { id: '选项4', label: '龙须面' },
          { id: '选项5', label: '北京烤鸭' }
        ],
        inputval: '',
        tinymceValue: '<p>你好<span style="color: #f00;">北京</span></p>',
        sortList: [
          { name: '综合', type: 1 },
          { name: '信用', type: 2 },
          { name: '价格', type: 3 },
          { name: '销量', type: 4 },
        ]
      }
    },
    methods: {
      // --------------------- 上传图片 START ---------------------
      // 图片大小验证未通过，返回一个size（图片最大限制，自己传入的size）值
      validateError(v) {
        this.$message.error(`上传图片不能超过 ${v}M`);
      },
      // 上传成功
      uploadSuccess(v) {
        console.log(v)
      },
      // 上传失败
      uploadError(v) {
        console.log(v)
      },
      // 没有立即上传时，返回当前的图片列表
      choice(v) {
        console.log(v)
      },
      uploadExceed(files, fileArr) {
        // console.log(files, fileArr)
        this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileArr.length} 个文件`);
      },
      // --------------------- 上传图片 END ---------------------
      // 分页返回一个对象，包含page、pageSize
      pagingChange(v) {
        /*
          v =  {
            page: 1,
            pageSize: 10
          }
        */
        console.log(v)
      },
      // MessageBox询问弹框
      open() {
        this.$cswConfirm('明天天晴', true, 'success', '登录', '退出').then(()=>{
          console.log("登录成功")
        }).catch(() => {
          console.log("取消")
        })
      },
      // Dialog弹框
      openDialog() {
        this.showDialog = true
      },
      dialogCloseUp() {
        console.log("Dialog弹框点击了取消")
      },
      dialogConfirm() {
        console.log("Dialog弹框点击了确定、、、")
      },
      dialogOther() {
        console.log("Dialog弹框点击了其他按钮///")
      },
      editText(v) {
        console.log(v)
      },
      selectChange(v) {
        console.log(v)
      },
      debounceClick() {
        console.log(666)
      },
      throoleClick(e) {
        console.log("节流")
      },
      editText(v) {
        console.log(v)
      },
      clear() {
        this.$refs['editor'].clear()
      },
      // 排序点击事件
      sortChange(v) {
        console.log(v)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .row{
    padding: 10px;
  }
</style>
